<template>
    <div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>运营管理</el-breadcrumb-item>
                <el-breadcrumb-item>财务管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-row :gutter="10">
            <el-col :span="16">
                <div class="box-shadow">
                    <div class="tip-title">
                        <p>资金链</p>
                    </div>

                    <!--<div id="dept_chart_1" ref="fina_chart_1"
                         style="width: 100%;height: 300px;overflow: hidden;"></div>-->
                    <div>
                        <el-table
                                :data="tableData"
                                style="width: 100%;">
                            <el-table-column
                                    align="center"
                                    prop="title"
                                    label="何事">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="fDesc"
                                    label="描述">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="fIn"
                                    label="收入">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="fOut"
                                    label="支出">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="time"
                                    label="日期">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div style="margin-top: 15px;float: right;">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 20, 50,100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total"
                                background>
                        </el-pagination>
                        <div style="clear:both;"></div>

                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="box-shadow">
                    <div class="tip-title">
                        <p>本月收支情况</p>
                    </div>
                    <div>
                        <div id="dept_chart_2" ref="fina_chart_2"
                             style="width: 100%;height: 300px;overflow: hidden;"></div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="10" style="padding: 15px;">
            <el-col :span="10" class="box-shadow">
                <div class="tip-title">
                    <p>添加记录</p>
                </div>
                <div>
                    <el-form :inline="true" :model="addData" class="demo-form-inline">
                        <el-form-item label="事由">
                            <el-input v-model="addData.title" placeholder="事由"></el-input>
                        </el-form-item>
                        <el-form-item label="描述">
                            <el-input v-model="addData.fDesc" placeholder="描述"></el-input>
                        </el-form-item>
                        <el-form-item label="收入">
                            <el-input v-model="addData.fIn" placeholder="收入"></el-input>
                        </el-form-item>
                        <el-form-item label="支出">
                            <el-input v-model="addData.fOut" placeholder="支出"></el-input>
                        </el-form-item>
                        <el-form-item label="时间">
                            <el-input v-model="addData.time" placeholder="时间"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">添加</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <!--<el-col :span="14">

            </el-col>-->
        </el-row>
    </div>
</template>

<script>
    import {addCaiWu, caiWuQueryAll, getCaiWuHadoop} from "@/api/admin/operate";

    export default {
        name: "Finance",
        mounted() {
            getCaiWuHadoop().then(resp => {
                this.chart_2(resp.data)
            });
            this.queryAll();
        },
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageSize: 5,
                total: 0,
                addData: {
                    type: "0",
                    title: "",
                    fDesc: "",
                    fIn: "0",
                    fOut: "0",
                    time: "",
                },
            }
        },
        methods: {
            onSubmit() {
                let flag = true;
                Object.values(this.addData).forEach(value => {
                    if (value == "") {
                        flag = false;
                    }
                })
                if (!flag) {
                    return false;
                }
                addCaiWu(
                    this.addData.type,
                    this.addData.title,
                    this.addData.fDesc,
                    this.addData.fIn,
                    this.addData.fOut,
                    this.addData.time,
                ).then(resp => {
                    console.log(resp)
                    if (resp.code == 0) {
                        this.$message.success("添加成功！");
                        this.queryAll();
                        getCaiWuHadoop().then(resp => {
                            this.chart_2(resp.data)
                        });
                    } else {
                        this.$message.error("添加失败！");
                    }
                })
            },
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.queryAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.queryAll();
            },
            queryAll() {
                caiWuQueryAll(this.currentPage, this.pageSize).then(resp => {
                    console.log(resp)
                    this.tableData = resp.data.records;
                    this.total = resp.data.total;
                    this.currentPage = resp.data.current;
                    this.pageSize = resp.data.size;
                })
            },
            chart_1() {
                /* let myChart = echarts.init(this.$refs.fina_chart_1);
                 // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)

                 // 使用刚指定的配置项和数据显示图表。
                 myChart.setOption(option);*/
            },
            chart_2(data) {
                let myChart = echarts.init(this.$refs.fina_chart_2);
                let option;
                let txt = "盈利";
                if (data.out > data.in) {
                    txt = "亏损";
                }
                // 指定图表的配置项和数据
                option = {
                    title: {
                        text: txt + ' ',
                        left: 'right'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['收入', '支出']
                    },
                    series: [
                        {
                            name: '资金分析',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: [
                                {value: data.in, name: '收入'},
                                {value: data.out, name: '支出'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
        }
    }
</script>

<style scoped>

</style>